<template>
  <div>
    <div>
      <el-form :model="queryParams" :inline="true" label-width="60px">
        <el-select class="custom-select" v-model="queryParams.id" placeholder="" default-first-option
          @change="appDetails">
          <el-option v-for="dict in getAppNameList" :key="dict.id" :label="dict.nickName" :value="dict.id" />
        </el-select>
      </el-form>
    </div>
    <el-tabs :model="form" style="margin-left: 20px">
      <el-tab-pane label="基本配置">
        <el-card>
          <div class="config-item">
            <span>小程序注册</span>
            <button v-if="form.id" class="authorized-tag" @click="toAppZcInfo()">已注册</button>
            <button class="action-button" v-if="!form.id" @click="toAppZcInfo()">去注册</button>
          </div>
          <!-- 分隔线 -->
          <div class="divider"></div>
          <div class="config-item">
            <span>商家授权&nbsp&nbsp&nbsp&nbsp</span>
            <button class="action-button" @click="gotoAuthUrl()">去授权</button>
          </div>
        </el-card>
        <el-card style="margin-top: 26px">
          <div class="config-item">
            <span>基本信息&nbsp&nbsp&nbsp&nbsp</span>
            <button v-if="form.id" class="authorized-tag" @click="toAppJbxx()">去修改</button>
            <button class="action-button" v-if="!form.id" @click="toAppJbxx()">去填写</button>
          </div>
          <!-- 分隔线 -->
          <div class="divider"></div>
          <div class="config-item">
            <span>类目信息&nbsp&nbsp&nbsp&nbsp</span>
            <button v-if="form.hasCategory" class="authorized-tag" @click="toAppCategoryInfo()">去修改</button>
            <button class="action-button" v-if="!form.hasCategory" @click="toAppCategoryInfo()">去填写</button>
          </div>
          <!-- 分隔线 -->
          <div class="divider"></div>
          <div class="config-item">
            <span>认证及备案</span>
            <button v-if="form.rzId" class="authorized-tag" @click="toAppRzxxInfo()">认证信息</button>
            <button class="action-button" v-if="!form.rzId" @click="toAppRzxxInfo()">认证信息</button>
            <button v-if="form.baId" class="authorized-tag" @click="toAppBaxxInfo()">备案信息</button>
            <button class="action-button" v-if="!form.baId" @click="toAppBaxxInfo()">备案信息</button>
            <button class="action-button" @click="">管理员人脸核身</button>
            <button class="action-button" @click="">申请认证及备案</button>
            <p style="font-size: 12px;margin-top: 16px">完成基本信息、类目信息、管理员人脸核身后，才可申请认证及备案</p>
            <p style="font-size: 12px;color: #87ff73;margin-top: 6px">认证审核</p>
          </div>
          <!-- 分隔线 -->
          <div class="divider"></div>
          <div class="config-item">
            <span>服务器域名</span>
            <button v-if="form.ymId" class="authorized-tag" @click="toAppServerInfo()">去修改</button>
            <button class="action-button" v-if="!form.ymId" @click="toAppServerInfo()">去填写</button>
          </div>
          <!-- 分隔线 -->
          <div class="divider"></div>
          <div class="config-item">
            <span>业务域名&nbsp&nbsp&nbsp&nbsp</span>
            <button v-if="form.ymId" class="authorized-tag" @click="toAppBusinessInfo()">去修改</button>
            <button class="action-button" v-if="!form.ymId" @click="toAppBusinessInfo()">去填写</button>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="开发及版本管理">
      </el-tab-pane>
    </el-tabs>
    <!-- 小程序注册弹框 -->
    <appZcInfo :qyId="form.qyId" v-if="appZcInfoDialog" v-model:visible="appZcInfoDialog" @confirm="handleConfirm"></appZcInfo>

    <!-- 基本信息弹框 -->
    <appJbxxInfo :id="form.id" v-if="appJbxxInfoDialog" v-model:visible="appJbxxInfoDialog" @confirm="handleConfirm"></appJbxxInfo>

    <!-- 服务器域名弹框 -->
    <appServerInfo :ymId="form.ymId" :baseId="form.id" v-if="appServerInfoDialog" v-model:visible="appServerInfoDialog" @confirm="handleConfirm">
    </appServerInfo>

    <!-- 业务域名弹框 -->
    <appBusinessInfo :ymId="form.ymId" :baseId="form.id" v-if="appBusinessInfoDialog" v-model:visible="appBusinessInfoDialog" @confirm="handleConfirm">
    </appBusinessInfo>

    <!-- 类目信息弹框 -->
    <appCategoryInfo :baseId="form.id" v-if="appCategoryInfoDialog" v-model:visible="appCategoryInfoDialog" @confirm="handleConfirm">
    </appCategoryInfo>

    <!-- 认证信息弹框 -->
    <appRzxxInfo :rzId="form.rzId" :id="form.id" v-if="appRzxxInfoDialog" v-model:visible="appRzxxInfoDialog" @confirm="handleConfirm"></appRzxxInfo>

    <!-- 备案信息弹框 -->
    <appBaxxInfo :baId="form.baId" :id="form.id" v-if="appBaxxInfoDialog" v-model:visible="appBaxxInfoDialog" @confirm="handleConfirm"></appBaxxInfo>
  </div>
</template>

<script setup name="ManageConfig" lang="ts">
import { listMiniProgramBaseInfo, getMiniProgramBaseInfo, delMiniProgramBaseInfo, addMiniProgramBaseInfo, updateMiniProgramBaseInfo, getAppName, getAppDetails } from '@/api/platform/miniProgramBaseInfo';
import { MiniProgramBaseInfoVO, MiniProgramBaseInfoQuery, MiniProgramBaseInfoForm } from '@/api/platform/miniProgramBaseInfo/types';
import { goto_auth_url } from '@/api/platform/enterpriseInfo';

import { useRoute } from 'vue-router';
import appZcInfo from './appZcInfo.vue';
import appJbxxInfo from '../miniProgramBaseInfo/appJbxxInfo.vue';
import appServerInfo from '../miniProgramDomain/appServerInfo.vue';
import appBusinessInfo from '../miniProgramDomain/appBusinessInfo.vue';
import appRzxxInfo from '../miniProgramAuthentication/appRzxxInfo.vue';
import appCategoryInfo from '../miniProgramCategory/appCategoryInfo.vue';
import appBaxxInfo from '../miniProgramRecord/appBaxxInfo.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const route = useRoute();
const appZcInfoDialog = ref(false);
const appJbxxInfoDialog = ref(false);
const appServerInfoDialog = ref(false);
const appBusinessInfoDialog = ref(false);
const appCategoryInfoDialog = ref(false);
const appRzxxInfoDialog = ref(false);
const appBaxxInfoDialog = ref(false);
const getAppNameList = ref<MiniProgramBaseInfoVO[]>([]);
const initFormData: MiniProgramBaseInfoForm = {
  id: undefined,
  enterpriseId: undefined,
  nickName: undefined,
  hasCategory: undefined,
  ymId: undefined,
  qyId: undefined,
  rzId: undefined,
  baId: undefined,
  webViewDomain: undefined
}
const data = reactive<PageData<MiniProgramBaseInfoForm, MiniProgramBaseInfoQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    id: undefined,
    enterpriseId: undefined,
    nickName: undefined,
    params: {
    }
  },
});
const { queryParams, form, rules } = toRefs(data);
const cancelNoRefresh = () => {
  dialogAppJbxx.visible = false
}
/** 查询企业信息列表 */
const getList = async () => {
  const id = route.query.id;
  const queryId: MiniProgramBaseInfoQuery = {
    enterpriseId: id,
  }
  const res = await getAppName(queryId);
  getAppNameList.value = res;
  queryParams.value.id = getAppNameList.value.length > 0 ? getAppNameList.value[0].id : undefined;
  appDetails(queryParams.value.id);
}

/** 小程序详情 */
const appDetails = async (id) => {
  const enterpriseId = route.query.id;
  const res = await getAppDetails({ id: id, enterpriseId: enterpriseId });
  form.value = res;
}

/** 小程序注册 */
const toAppZcInfo = () => {
  appZcInfoDialog.value = true;
}

/** 小程序基本信息 */
const toAppJbxx = () => {
  appJbxxInfoDialog.value = true;
}

/** 小程序服务器域名 */
const toAppServerInfo = () => {
  appServerInfoDialog.value = true;
}

/** 小程序业务域名 */
const toAppBusinessInfo = () => {
  appBusinessInfoDialog.value = true;
}
/** 小程序类目 */
const toAppCategoryInfo = () => {
  appCategoryInfoDialog.value = true;
}
/** 小程序认证信息 */
const toAppRzxxInfo = () => {
  appRzxxInfoDialog.value = true;
}
/** 小程序备案信息 */
const toAppBaxxInfo = () => {
  appBaxxInfoDialog.value = true;
}

/**授权 */
const gotoAuthUrl = async () => {
  let res = await goto_auth_url();
  window.open(res.data.url);
}
onMounted(() => {
  getList();
});
</script>

<style scoped>
.authorized-tag {
  cursor: pointer;
  padding: 4px 24px;
  background-color: #c3f2d5;
  color: #3aba70;
  border: none;
  margin-left: 42px;
}

.custom-select {
  border: none;
  outline: none;
  background-color: transparent;
  padding: 6px 8px;
}

.config-item {
  background-color: white;
  padding: 15px;
  margin-bottom: 10px;
  justify-content: space-between;
  align-items: center;
}

.action-button {
  background-color: #1989fa;
  color: white;
  border: none;
  padding: 4px 24px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 40px;
}

.divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 10px 0;
}
</style>
